<template>
  <div class="menu">
    <ul>
      <li
        v-for="(item) in menuList"
        :key="item"
      >
        <SMenuItem 
          :to="item.link" 
          :icon="'icon-arrow-right3'" 
          >
          {{item.name}}
        </SMenuItem>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import getMenuList from "../assets/configs/menu.config.json";
import SMenuItem from "./../s-components/s-menu/s-menu-item.vue"

let menuList = reactive(getMenuList.menulist);
let activeIndex = ref(-1);
let router = new useRouter();
</script>
<style scoped>
.menu > ul > li {
  font-size: 18px;
  font-weight: 700;
  list-style: none;
  display: block;
  height: 30px;
  line-height: 30px;
  padding: .5em;
  /* padding-left: 1em; */
  border-left: 3px solid transparent;
  cursor: pointer;
  color: #999;
  /* height: 20px; */
}

.menu > ul > li > a {
  color: #999;
}

.menu > ul > li:hover a {
  color: #008900;
}

.menu > ul > li:hover {
  /* border-left: 3px solid #0e5f3a; */
  color: #008900;
}

.menu ul li .active {
  border-left: 2px solid #0e5f3a;
  color: #008900;
}
</style>
